import React, { PropTypes, PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { FirstHeaderC, TableC, ProductListC } from '../../../../../comps';
import moment from 'moment';
import styles from './index.less';
import { fixedNum } from '../../../../../utils/utils';

@Form.create()
class MyHold extends PureComponent {
  state = {
    dataObj: '', //债券信息
    dataSource: [],
    columns: [],
    pageInfo: {},
  };

  componentDidMount() {
    const {
      bondDeviationDetailM: { dataObj },
    } = this.props;
    this.setState(
      {
        dataObj: dataObj,
      },
      () => {
        this.getTableData();
      },
    );
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    //判断是否是最新的债券信息
    if (nextProps.bondDeviationDetailM.dataObj != this.state.dataObj) {
      const {
        form: { resetFields },
      } = this.props;
      resetFields();
      this.setState(
        {
          dataObj: nextProps.bondDeviationDetailM.dataObj,
        },
        () => {
          this.getTableData();
        },
      );
    }
  }

  //获取我的持仓table数据
  getTableData = (page, pageSize) => {
    const { dispatch } = this.props;
    const { dataObj } = this.state;
    const datas = {};
    datas.dataDt = moment().add(0, 'day').format('YYYY-MM-DD');
    datas.timestamp = new Date().getTime();
    datas.page = page ? page : 1;
    datas.pageSize = pageSize ? pageSize : 20;
    //暂取消产品id
    // datas.productId = this.state.productId;
    datas.exchangeCode = dataObj.EXCHANGECODE;
    datas.tradingCode = dataObj.TRADINGCODE_NOSUFFIX;

    dispatch({
      type: 'basicEventM/findMyHoldData',
      payload: datas,
      callback: (res) => {
        this.setState({
          dataSource: res.dataSource,
          columns: res.columns,
          pageInfo: res.pageInfo,
        });
      },
    });
  };

  //搜索栏值变化
  productChange = (e) => {
    this.setState(
      {
        productId: !!e ? e.key : '',
      },
      () => {
        this.getTableData();
      },
    );
  };

  //table页码变化
  onTableChange = (page, pageSize) => {
    this.getTableData(page, pageSize);
  };

  //到期表格靠右
  setColumns = (columns) => {
    const arr = columns;
    if (arr && arr.length) {
      arr.map((item) => {
        if (item.key == 'lCurrentAmount' || item.key == 'parValueTotal') {
          item.align = 'right';
        }
        if (item.key == 'lCurrentAmount' || item.key == 'parValueTotal' || item.key == 'fullMarketValue') {
          item.render = (text, record) => {
            return text !== null ? fixedNum(text, 0) : '-';
          };
        }
      });
    }
    return arr;
  };

  render() {
    const { columns, dataSource, pageInfo } = this.state;
    const newColumns = this.setColumns(columns);
    return (
      <div className={styles.myHold}>
        <FirstHeaderC title='我的持仓' />
        {false && (
          <div className='search-box'>
            <ProductListC
              form={this.props.form}
              dataIndex='productId'
              rules={[{ required: false, message: '请选择产品!' }]}
              onChange={(e) => this.productChange(e)}
              onRef={(ref) => this.setState({ ProductListC1: ref })}
            />
          </div>
        )}
        <div>
          <TableC
            columns={newColumns}
            dataSource={dataSource}
            loading={this.props.loading === true}
            current={pageInfo && pageInfo.current}
            total={pageInfo && pageInfo.total}
            pageSize={pageInfo && pageInfo.pageSize}
            onPageChange={(page, pageSize) => this.onTableChange(page, pageSize)}
            onShowSizeChange={(current, size) => this.onTableChange(current, size)}
          />
        </div>
      </div>
    );
  }
}
export default connect(({ bondDeviationDetailM, basicEventM, loading }) => ({ bondDeviationDetailM, basicEventM, loading: loading.effects['basicEventM/findMyHoldData'] }))(MyHold);
